<template>
	<view>
		<view class="content">
			<view style="text-align: center; margin-top: 60rpx;">
				<image class="background-image" src="/static/logo.png" mode=""></image>
			</view>

			<view v-if="!raining">
				今天天气真好！
			</view>
			<view v-if="raining">
				下雨了，真糟糕！！
			</view>
			<view v-if="state==='vue'">VUE</view>
			<view>State is {{state?'vue':'APP'}}</view>
			<view>
				<view v-if="state==='vue'">uniapp</view>
				<view v-else-if="state==='html'">HTML</view>
				<view v-else>APP</view>
			</view>

		</view>

		<view class="content">
			<view v-for="item in arr ">
				<view style="color:chartreuse;">{{item}}</view>
			</view>
			<view v-for="(item,index) in arr">
				<view>{{index}}</view>
			</view>
			<view v-for="(value,name,index) in object">
				<view class="">
					{{index}}.{{name}}:{{value}}
				</view>
			</view>
			<view v-for="item in arr" :key="item.id">
				<view class="">
					{{item.id}}:{{item.name}}
				</view>
			</view>

		</view>
		<view class="content">
			<view class="block" @click="change" :style="{backgroundColor:color,width:size,height:size}"></view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				sizes: ['100rpx', '280rpx', '300rpx'],
				colors: ['blue', 'red', 'green'],
				currentIndex: 0,
				currentSindex: 0,
				size: '200rpx',
				color: 'aqua',
				state: '',
				raining: false,
				arr: [{
						id: 1,
						name: "小明",
						age: 18
					},
					{
						id: 2,
						name: "李红",
						age: 20
					},
					{
						id: 3,
						name: "张三",
						age: 23
					},
				],
				object: {
					title: '你好星期六',
					content: 'where are you from?',
					time: '2025.11.14'

				}
			}
		},
		methods: {
			change() {
				this.color = this.colors[this.currentIndex];
				this.size = this.sizes[this.currentSindex];
				this.currentIndex = (this.currentIndex + 1) % this.colors.length;
				this.currentSindex = (this.currentSindex + 1) % this.sizes.length;
				// this.color=this.color==='aqua'?'red':'blue';
				// this.size=this.size==='200rpx'?'150rpx':'300rpx';
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
	}

	.background-image {
		width: 120rpx;
		height: 120rpx;
		object-fit: cover;

	}

	.block {
		width: 200rpx;
		height: 200rpx;
		background-color: aqua;
		margin: 60rpx auto;
	}
</style>